<template>
  <div class="pb50">
    <van-nav-bar :title="$route.meta.title"  @click-right="$router.push('/search')" >
      <template #right>
        <van-icon name="search" size="18"  />
      </template>
    </van-nav-bar>
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in banner" :key="index">
        <img :src="$HOST+item.img" class="imgs" />
      </van-swipe-item>
    </van-swipe>
    <!-- 主菜单 -->
    <van-grid :border="false" :column-num="4" :gutter="10">
      <van-grid-item>
        <van-image src="https://img.yzcdn.cn/vant/apple-1.jpg" />
        <p>限时抢购</p>
      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img.yzcdn.cn/vant/apple-2.jpg" />
        <p>积分商城</p>
      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img.yzcdn.cn/vant/apple-3.jpg" />
        <p>联系我们</p>
      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img.yzcdn.cn/vant/apple-3.jpg" />
        <p>商品分类</p>
      </van-grid-item>
    </van-grid>
    <!-- 抢购  广告区域-->

    <!-- 商品 -->
    <van-tabs type="card" v-if="list.length">
      <br>
      <van-tab title="热门推荐">
        <van-card
           v-for="(item,index) in list[0].content" :key="index"
          class="card"
          :price="item.price"
          desc="描述信息xxxx"
          :title="item.goodsname"
          :thumb="$HOST+item.img"
        >
        <template #footer>
          <van-button size="mini" type="primary"  @click="addCar({id:item.id,num:1})"><van-icon name="shopping-cart-o" /></van-button>
        </template>
        </van-card>
      </van-tab>
      <van-tab title="发现新品">
        <van-card
           v-for="(item,index) in list[1].content" :key="index"
          class="card"
          :price="item.price"
          desc="描述信息xxxx"
          :title="item.goodsname"
          :thumb="$HOST+item.img"
        >
        <template #footer>
          <van-button size="mini" type="primary" @click="addCar({id:item.id,num:1})" ><van-icon name="shopping-cart-o" /></van-button>
        </template>
        </van-card>
      </van-tab>
      <van-tab title="所有商品">
        <van-card
           v-for="(item,index) in list[2].content" :key="index"
          class="card"
          :price="item.price"
          desc="描述信息xxxx"
          :title="item.goodsname"
          :thumb="$HOST+item.img"
        >
        <template #footer>
          <van-button size="mini" type="primary" @click="addCar({id:item.id,num:1})"><van-icon name="shopping-cart-o" /></van-button>
        </template>
        </van-card>
      </van-tab>
    </van-tabs>

  </div>
</template>

<script>
import { getIndex } from "@/common/request"
import {  mapActions } from "vuex"
export default {
    data(){
        return{
          banner:[],
          list:[]
        }
    },
    mounted(){
       this.getData()
    },
    methods:{
      ...mapActions({
        addCar:'cart/add_car'
      }),
      async getData(){
          let res = await getIndex();
          this.banner = res[0];
          this.list = res[2]
      },
      fn(){
        console.log(222)
      }
    },
    components:{}
}

</script>
<style scoped>
.my-swipe .van-swipe-item  .imgs{
    /* color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed; */
    width:100%;
    height:150px;
  }
</style>